<html>
<#include "../common/header.ftl" />
<link rel="stylesheet" href="static/css/myFall.css" />

<script src="static/js/jaliswall.js"></script>     
<style  type="text/css">
.container{
	max-width:1600px;
	margin: 0 auto;
}
</style>
<script>
	$(function() {
		$('#search').on('click', function() {
			search();
		})
		$('#loginSub').on('click', function() {
			if (($("#log_username").val().trim()) == '') {
				tip('账号不可为空！');
				return;
			}
			if (($("#log_password").val().trim()) == '') {
				tip('密码不可为空！');
				return;
			}

			let obj = {};
			obj.username = $("#log_username").val().trim();
			obj.password = $("#log_password").val().trim();

			$.ajax({
				url : "login?method=login",
				type : "POST",
				scriptCharset : 'utf-8',
				data : JSON.stringify(obj),
				contentType : "application/json; charset=utf-8",
				success : function(res) {
					let data = JSON.parse(res)
					console.log("res", data)
					if (data.code === 0) {
						tip("登录" + data.msg);
						setTimeout("window.location.reload()",1500)
						/* 
						$("body").load("index"); //很关键！
						 */
					}else{
						tip(data.msg);
					}
				},
				error : function(res) {
					console.log("res", res)
					alert(res);
				}
			});
			console.log('data', $('form').serializeArray())

		});
		$('#registerSub').on('click', function() {
			if (($("#reg_username").val().trim()) == '') {
				tip('账号不可为空！');
				return;
			}
			if (($("#reg_password").val().trim()) == '') {
				tip('密码不可为空！');
				return;
			}
			if (($("#rePassword").val().trim()) == '') {
				tip('请再次输入密码！');
				return;
			}
			if ($("#rePassword").val().trim()!=$("#reg_password").val().trim()) {
				tip('两次密码不一致！');
				return;
			}
			if (($("#email").val().trim()) == '') {
				tip('邮箱不可为空！');
				return;
			}

			let res = {};
			res.username = $("#reg_username").val().trim();
			res.nickname = $("#reg_nickname").val().trim();
			res.password = $("#reg_password").val().trim();
			res.email = $("#email").val().trim();
			console.log(JSON.parse(JSON.stringify(res)))
			$.ajax({
				url : "login?method=register",
				type : "POST",
				scriptCharset : 'utf-8',
				data : JSON.stringify(res),
				contentType : "application/json; charset=utf-8",
				success : function(res) {
					let data = JSON.parse(res)
					console.log("res", data)
					if (data.code === 0) {
						$("#reg_dismiss").click()
						$("#warn").text('注册'+data.msg)
						$("#modal-warn-login").css("display","inline")
						$("#modal-warn-ok").css("display","none")
						$("#modal-282051").click()
					}
					if (data.code === 3) {
						$("#warn").text(data.msg)
						$("#modal-282051").click()
					}
				},
				error : function(res) {
					console.log("res", res)
					alert(res);
				}
			});
			console.log('data', $('form').serializeArray())

		});
		$(function() {
			$('.wall').jaliswall();
		});

	});
	function tip (msg){
		$("#warn").text(msg)
		$("#modal-282051").click()
	}
	function detail (id){
		$.get("news", { method: "detail_page", id: id },
				  function(data){
			try{
				let res = JSON.parse(data)
				if(res.code == -1 ){
				$("#modal-282050").click();		 	
				}else(
				location.href=("news?method=detail_page&id="+id)	
				)
			}catch(e){
				location.href=("news?method=detail_page&id="+id)	
			}
		})
	};
	
	function getData(servlet,method){
		$.get(servlet, { method: method},
				  function(data){
			try{
				let res = JSON.parse(data)
				if(res.code == -1 ){
				$("#modal-282050").click();		 	
				}else(
				location.href=(servlet+"?method="+method)	
				)
			}catch(e){
				location.href=(servlet+"?method="+method)
			}
		})
	}
	function list(){
		getData("news","list");
	}
	function search(){
		$.get("news", { method:"search"},
				  function(data){
			try{
				let res = JSON.parse(data)
				if(res.code == -1 ){
				$("#modal-282050").click();		 	
				}		
			}catch(e){
				location.href=("index")
			}
		})
		
	}
	
</script>

</head>
<body
	<#if Session.user?? && user.role==1> style="margin-left:200px" </#if>
>	
	<#if Session.user?? && user.role==1>
	<script>
		$("body").css("margin-left", "200px")
	</script>
	<div id="wrapper" class="toggled"><#--边栏sidebar--> <#include
		"../common/nav.ftl" /> <#--主要内容content--></div>
	</#if> 
	
 <#include "../modal/loginModal.ftl" />
	<div class="container">
		<div class="row clearfix">
		 <a id="modal-282050" href="#modal-tip" style="display:none" role="button" class="" data-toggle="modal"></a>
		 <a id="modal-282051" href="#modal-warns" style="display:none" role="button" class="" data-toggle="modal"></a>
			<div class="modal fade" id="modal-tip" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
							<h2 class="modal-title" id="myModalLabel">
								警告！
							</h2>
						</div>
						<div  class="modal-body">
							<h3 style="color:red">您未登录，或登录已过期。
							<p>您可以选择：</p></h3>
						</div>
						<div class="modal-footer">
						<a data-toggle="modal" data-target="#login" class="btn " type="button"  data-dismiss="modal" href=""><span class="glyphicon glyphicon-log-in"></span> 去登录</a>
						<a data-toggle="modal" data-target="#login" class="btn " type="button"  data-dismiss="modal" href=""><span class="glyphicon glyphicon-log-in"></span> 还是去登录</a>
						</div>
					</div>
				</div>
			</div>
			<#include "../modal/tips.ftl" />
			<div  id="refresh" class="col-md-12 column">
			<#include "../common/bread.ftl"/>
				<div class="jumbotron"
					style="background-image: url(static/image/bg.png); background-size: 100%; color:white">
					<h1>ZZU IOTLAB</h1>
					<p>比赛创意...</p>
					<p>技术交流...</p>
					<p>资源分享...</p>
					<p>
						<button class="btn btn-primary btn-large" onclick="list()"> 查看详情</button>
					</p>
				</div>
			</div>
		</div>
		<div class="row clearfix" style="padding:30px">
		<p><h1> 时下最热
		<a style="color:red">
		<span class="glyphicon glyphicon-fire" /><span class="glyphicon glyphicon-fire" /><span class="glyphicon glyphicon-fire" />
		</a>
		</h1></p>
		
			<div>
			
		<#list list as item>

	 	<div  class="wall">
	 	</#list>
			<#list list as item>
			<div class="wall-item">
				<h2  onclick= onclick = detail(${item.newsId}) >
				<div <#if item.newsClick gt 100>
								style="color:red"						
							</#if> >${item.newsName }
							<#if item.newsClick gt 100 && item.newsClick lte 400>
							<span class="glyphicon glyphicon-fire" />
							</#if>
							<#if item.newsClick gt 401 && item.newsClick lte 800>
							<span class="glyphicon glyphicon-fire" />
							<span class="glyphicon glyphicon-fire" />
							</#if>
							<#if item.newsClick gt 801>
							<span class="glyphicon glyphicon-fire" />
							<span class="glyphicon glyphicon-fire" />
							<span class="glyphicon glyphicon-fire" />
							</#if>
							</div>
				
				</h2>
				<span style="color:#808080" > 
				<h4 style="display:block">
				<span class="label label-info">${item.newsAuthor }</span>
				<span class="label label-info">${item.createtime?string("yyyy-MM-dd HH:mm:ss")}</span>
				</h4>
				<p style="display:block;padding:5px"><span style="font-size:25px" class="glyphicon glyphicon-eye-open"/><span class="badge" style="font-size:15px">${item.newsClick }</span><span style="font-size:25px" class="glyphicon glyphicon-eye-open"/></p>
				<div id="detail_id" style="display:none"> ${item.newsId }</div>
				<div id="psty"  onclick= detail(${item.newsId}) >
				<p>${item.newsContent}</p>
				</div>
				<p>
					<a class="btn" href="#"  onclick= detail(${item.newsId})>查看全部
						»</a>
				</p>
			</div>
			</#list>
		</div> 
		</div> 
		</div> 
	</div>
	
		<#--
		<script
		src="https://cdn.bootcss.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>   
		这里不能用 这个版本，遮罩窗体会出问题， md 找了半天-->
		<script src="static/js/3.1.0bootstrap.min.js"></script>
		
</body>


</html>

